<route lang="json5">
  {
    style: {
      navigationBarTitleText: '登录页'
    },
  }
  </route>

<template>
  <view class="page">
    <view class="header-box">
      <image class="header-bg" src="@/static/images/user/header-bg.png" mode="aspectFill" />
      <view class="header-bar"></view>
    </view>

    <view class="login-form">
      <view class="login-form__title">登录</view>
      <sar-form ref="formRef" :model="form" label-width="40px">
        <sar-form-item name="username">
          <sar-input v-model="form.username" inlaid root-class="login-form-input" placeholder="请输入账号">
            <template #prepend>
              <sar-icon :name="IconUser" size="20px" />
            </template>
          </sar-input>
        </sar-form-item>

        <sar-form-item name="password">
          <sar-input
            v-model="form.password" inlaid root-class="login-form-input"
            :type="hidePassword ? 'text' : 'password'" placeholder="请输入密码"
          >
            <template #prepend>
              <sar-icon :name="IconPsd" size="20px" />
            </template>
            <template #append>
              <view @click="hidePassword = !hidePassword">
                <sar-icon v-if="hidePassword" name="/static/images/login/eye-close.svg" size="20px" />
                <sar-icon v-else name="/static/images/login/eye-open.svg" size="20px" />
              </view>
            </template>
          </sar-input>
        </sar-form-item>

        <sar-form-item>
          <sar-button round @click="login">登录</sar-button>
        </sar-form-item>
      </sar-form>

      <gi-footer></gi-footer>
    </view>
  </view>
</template>

<script lang='ts' setup>
import type { FormItemContext } from 'sard-uniapp'
import IconPsd from '@/static/images/login/icon-psd.svg'
import IconUser from '@/static/images/login/icon-user.svg'

const formRef = ref<FormItemContext>()
const hidePassword = ref(false)

const form = reactive({
  username: '',
  password: '',
  remember: true,
})

function login() { }
</script>

<style lang='scss' scoped>
:deep(.sar-form-item) {
  &::before {
    display: none;
  }
}

.page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header-box {
  position: relative;
  height: 400rpx;
  .header-bg {
    width: 100%;
    height: 100%;
  }
  .header-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #fff;
    border-radius: 30px 30px 0 0;;
  }
}

.login-form {
  flex: 1;
  padding: 30px 20px;
  overflow: hidden;
  background-color: #fff;

  &__title {
    padding: 0 30px;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
    color: #5040DC;
  }
}

.login-form-input {
  height: 40px;
  padding: 0 10px;
  padding-right: 15px;
  border-radius: 999px;
  background: rgba(var(--sar-primary-rgb), 0.07);
}
</style>
